<script setup lang="ts">
  import { ref, reactive } from 'vue';
  import { deleteUser, getUserList } from '@/services/userService/lcdpUser';
  import ProTable from '@/components/ProTable';
  import type { ProColumns } from '@/components/ProTable';
  import EditInfo from './components/EditInfo.vue';

  const keyword = ref('');
  const tableRef = ref();
  const userState = reactive({
    visible: false,
    selectItem: null,
  });

  const columns: ProColumns<API.LcdpUser.UserDetailInfo>[] = [
    {
      title: '序号',
      key: 'dataIndex',
    },
    {
      title: '账号',
      key: 'loginId',
    },
    {
      title: '姓名',
      key: 'userName',
    },
    {
      title: '邮箱地址',
      key: 'email',
    },
    {
      title: '部门',
      key: 'departmentList',
      isTag: true,
      render: (row) =>
        row.departmentList?.map((val) => ({
          value: val.departmentName,
          key: val.departmentId,
        })),
    },
    {
      title: '手机号',
      key: 'phone',
    },
    {
      title: '角色',
      key: 'roleList',
      width: 120,
      ellipsis: { tooltip: true },
      isTag: true,
      render: (row) =>
        row.roleList?.map((val) => ({
          value: val.roleName,
          key: val.roleId,
        })),
    },
    {
      title: '添加时间',
      key: 'createTime',
    },
  ];

  const loadList = async (params: API.PageParams) => {
    const res = await getUserList({
      ...params,
      userKey: keyword.value,
    });
    return {
      data: res.userList,
      total: res.total,
    };
  };

  const reloadList = () => {
    tableRef.value.reload();
  };
  const rowKey = () => 'userId';
</script>
<template>
  <div>
    <ProTable ref="tableRef" :columns="columns" :request="loadList" :row-key="rowKey">
      <template #tableTitle>
        <n-button type="primary" @click="userState.visible = true">新增管理员</n-button>
      </template>
      <template #toolbar>
        <n-input-group class="w-auto">
          <n-input class="w-200px" v-model:value="keyword" @keyup.enter.prevent="reloadList" />
          <n-button type="primary" @click="reloadList">搜索</n-button>
        </n-input-group>
      </template>
    </ProTable>
    <EditInfo v-model:visible="userState.visible" v-if="userState.visible" />
  </div>
</template>

<style scoped lang="less">
  .box {
    width: 100%;
    height: 80vh;
    background: red;
  }
</style>
